<app-header title="个人中心"></app-header>
<div class="container" [@slideUp]>
  <ng-container *ngIf="userDetails">
    <div class="user-card">
      <div class="user-avatar">
        <img [src]="userDetails.avatar_url" preview="7rem" alt="">
      </div>
      <div class="login-name">{{userDetails.loginname}}</div>
      <div class="user-score">积分：{{userDetails.score}}</div>
      <div class="create-time">注册于：{{userDetails.create_at | fromNow}}</div>
    </div>

    <div class="content">
      <div mdl-shadow="2">
        <h6 class="title">最近收藏的话题</h6>
        <ng-container *ngIf="collectTopics.length > 0">
          <mdl-list>
            <mdl-list-item *ngFor="let collect of collectTopics">
              <mdl-list-item-primary-content>
                <mdl-list-item-text-body>
                  <a [routerLink]="['/detail/' + collect.id]">
                    <img preview="3rem" class="author-avatar" [src]="collect.author.avatar_url" alt="">
                    {{collect.title}}
                  </a>
                </mdl-list-item-text-body>
              </mdl-list-item-primary-content>
            </mdl-list-item>
          </mdl-list>
        </ng-container>
        <ng-container *ngIf="collectTopics.length == 0">
          <p class="empty">暂无收藏</p>
        </ng-container>
      </div>
      <div mdl-shadow="2">
        <h6 class="title">最近创建的话题</h6>
        <ng-container *ngIf="userDetails.recent_topics.length > 0">
          <mdl-list>
            <mdl-list-item *ngFor="let topics of userDetails.recent_topics">
              <mdl-list-item-primary-content>
                <mdl-list-item-text-body>
                  <a [routerLink]="['/detail/' + topics.id]">
                    <img preview="3rem" class="author-avatar" [src]="topics.author.avatar_url" alt="">
                    {{topics.title}}
                  </a>
                </mdl-list-item-text-body>
              </mdl-list-item-primary-content>
            </mdl-list-item>
          </mdl-list>
        </ng-container>
        <ng-container *ngIf="userDetails.recent_topics == 0">
          <p class="empty">暂无话题</p>
        </ng-container>
      </div>
      <div mdl-shadow="2">
        <h6 class="title">最近参与的话题</h6>
        <ng-container *ngIf="userDetails.recent_replies.length > 0">
          <mdl-list>
            <mdl-list-item *ngFor="let replies of userDetails.recent_replies">
              <mdl-list-item-primary-content>
                <mdl-list-item-text-body>
                  <a [routerLink]="['/detail/' + replies.id]">
                    <img preview="3rem" class="author-avatar" [src]="replies.author.avatar_url" alt=""> 
                    {{replies.title}}
                  </a>
                </mdl-list-item-text-body>
              </mdl-list-item-primary-content>
            </mdl-list-item>
          </mdl-list>
        </ng-container>
        <ng-container *ngIf="userDetails.recent_replies == 0">
          <p class="empty">暂无话题</p>
        </ng-container>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="loading">
    <div class="loading">
      <mdl-spinner [active]="true"></mdl-spinner>
    </div>
  </ng-container>
</div>